<!DOCTYPE html>
<script src="../resources/testharness.js"></script>
<script src="../resources/testharnessreport.js"></script>
<style>
  @keyframes anim {
    from { fill: orange; }
    to { fill: brown; }
  }
  rect { animation: anim 5s; }
  defs { display: none; }
</style>
<svg>
  <defs>
    <rect x="0" y="0" width="100" height="100" id="target" fill="green" />
  </defs>
  <use x="0" xlink:href="#target" />
</svg>
<script>
  test(() => {
    document.body.offsetTop;
    // Triggers a style recalc with the <defs> element as the recalc root.
    // Marking the rect instance under the <use> element style dirty during
    // style recalc with <defs> as the root will leave the <use> rect dirty.
    document.querySelector("defs").style.display = "block";
    document.body.offsetLeft;
  }, "This should not trigger any crashes or DCHECK failures.");
</script>
